<template>
    <div class="carrier_product">
        <el-row>
            <el-col :md="12">
            <div class="block">
                <span class="demonstration">历史价格（时间）</span>
                <el-date-picker
                    v-model="value4"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="HH:mm" 
                    format="HH:mm"
                >
                </el-date-picker>
            </div>
            </el-col>
            <el-col :md="12">
                 <el-button type="primary">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary">
                        <i class="el-icon-refresh"></i>
                    </el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="name" label="产品名称" width="200">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="200">
            </el-table-column>
            <el-table-column prop="onDate" label="生效时间" width="250">
            </el-table-column>
            <el-table-column prop="offDate" label="失效时间" width="250">
            </el-table-column>
            <el-table-column prop="isActivity" label="有效性">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    product: '',
                },
                formOnline: {
                    activity: ''
                },
                value4: '',
                tableData: []
            }
        },
        computed: {
            carrier_product_id() {
                return this.$store.getters.carrier.carrierId
            }
        },
        mounted() {
            this.getCarrierData()
        },
        methods: {
            getCarrierData() {
                this.$axios.get('/api/carrier_product_price').then((res) => {
                    if (res.data.errno === 0) {
                        this.tableData = res.data.data.productData
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .carrier_product {
        .el-row {
            margin-bottom: 30px;
        }
    }
    .demonstration {
        font-size: 14px;
    }
</style>